// 负责管理所有的自定义指令
import store from '@/store' // 3 使用自定义指令处理按钮权限
// 1
// v-imgerror="备用图地址"
export const imgerror = {
  // 表示的 使用这个指令的标签插入DOM树中,就会触发这个inserted
  // el 使用指令所在的元素
  // binding 指令的相关信息对象,接收 binding.value 指令的值
  inserted(el, binding) {
    // console.log(el, bindings)
    el.onerror = function() {
      // console.log('图片加载失败了'), 设置备用图片地址
      el.src = binding.value
    }
  }
}

// v-color="字体颜色"
export const color = {
  inserted(el, binding) {
    el.style.color = binding.value
  }
}

// 2
// import Vue from 'vue'

// Vue.directive('imgerror', {
//   // 表示的 使用这个指令的标签插入DOM树中，就会触发这个inserted
//   // el：表示的是使用指令的DOM元素
//   // binding：在使用这个指令的时候传入数据（binding.value）
//   inserted(el, binding) {
//     // console.log(el)
//     // console.log(binding.value)
//     el.onerror = function() {
//       el.src = binding.value
//     }
//   }
// })

// Vue.directive('color', {
//   inserted(el, binding) {
//     el.style.color = binding.value
//   }
// })
// 3
export const permission = {
  inserted(el, binding) {
    // binding.value
    const points = store.getters.roles?.points || []
    if (!points.includes(binding.value)) {
      // el.style.display = 'none'
      // console.dir(el.parentNode)
      el.parentNode.removeChild(el)
    }
  }
}
